<template>
	<view>
		<van-tabs :active="active">
			<van-tab title="我想捐赠">
				<Donate :info="donateInfo" />
			</van-tab>
			<van-tab title="我有需求">
				<Need :info="needInfo" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import Donate from '@/components/Publish/Donate.vue'
	import Need from '@/components/Publish/Need.vue'
	export default {
		components: {
			Donate,
			Need
		},
		data() {
			return {
				active: 0,
				donateInfo: {},
				needInfo: {}
			}
		},

		methods: {
		},
		onLoad(options) {
			this.active = Number(options.index);
		},
		onShow(info) {
			if (info) {
				info = JSON.parse(decodeURIComponent(info));
				if (info.index == 0) {
					this.donateInfo = info.res
				} else {
					this.needInfo = info.res
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .van-tabs__line {
		background-color: #d81e06;
	}

	/deep/ .van-ellipsis {
		font-size: 34rpx;
		font-weight: bold;
		title-inactive-color: #8a8a8a;
		border-radius: 30rpx;
	}

	/deep/ .van-tabs__wrap {
		margin: auto 20rpx;
	}

	/deep/ .van-sticky-wrap {
		background-color: #d81e06;
	}

	/deep/ .van-tabs__scroll--line {
		border-radius: 30rpx;
		background-color: white;
	}

	/deep/ .van-tab__pane--active {
		border-radius: 0 0 30rpx 30rpx;
		background-color: white;
		margin: auto 20rpx
	}

	.addressInfo {
		margin: 40rpx 20rpx;
		padding: 0 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
			}

			.getAddress {
				color: #d81e06;
			}
		}

		.user {
			display: flex;
			justify-content: space-between;
			color: #666666;
		}

		.address {
			font-size: smaller;
			color: #666666;
		}

		.line {
			height: 1px;
			background-color: lightgray;
			margin-top: 30rpx;
		}


		.warning {
			margin-top: 20rpx;
			font-size: small;
			color: #8a8a8a;
			display: flex;

			/deep/ .u-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
